<template>
  <div id="app">
    <h2>----------App内容----------</h2>
    <h3>{{$store.state.count}}</h3>
    <!-- <h2>App组件计数器：{{count}}</h2> -->
    <!-- 直接修改state状态 -->
    <!-- <button @click="$store.state.count++">+</button>
    <button @click="$store.state.count--">-</button> -->

    <!-- 通过Mutations修改state状态 -->
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>

    <h2>----------App内容：getters相关信息----------</h2>
    <!-- <h2>{{$store.state.count * $store.state.count}}</h2> -->
    <h3>{{$store.getters.powerCount}}</h3>

    <h3>{{$store.getters.studentsMessage}}</h3>
    <h3>{{more20StuAge}}</h3>
    <h3>{{$store.getters.greaterAgesCount}}</h3>
    <h3>{{$store.getters.greaterAgesCountLength}}</h3>

    <h3>{{$store.getters.moreAgesStu(30)}}</h3>


    <hello-vuex/>
    <br>
    <hello-mutations/>
    <br>
    <hello-actions/>
    <br>
    <hello-modules/>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'
import HelloMutations from './components/HelloMutations'
import HelloActions from './components/HelloActions'
import HelloModules from './components/HelloModules'

import { INCREMENT, DECREMENT, INCREMENTCOUNT, ADDSTUDENT } from './store/mutations-types'

export default {
  name: 'App',
  components:{
    HelloVuex,
    HelloMutations,
    HelloActions,
    HelloModules
  },
  methods:{
    addition(){
      // 拿到$store对象，然后用commit提交，之后再传入Mutations中定义方法的名字
      this.$store.commit(INCREMENT);
    },
    subtraction(){
      this.$store.commit(DECREMENT);
    },
    addCount(number){
      // payload（载荷）：在后面跟上的参数，在提交的时候帮你附载多一个东西
      // 1. 普通的提交风格
      // this.$store.commit('incrementCount', number);

      // 2. 特殊的提交封装
      this.$store.commit({
        type: INCREMENTCOUNT,
        number,
      });
    },
    addStudent(){
      const stu ={id: 114, name: '小刘', age: 18};
      this.$store.commit(ADDSTUDENT, stu);
    },
  },
  computed:{
    more20StuAge(){
      return this.$store.state.students.filter(s=>s.age>=20).length;
    },
  },
}
</script>

<style>

</style>
